<!DOCTYPE html>
<html lang="en">
<head>
    <title>本地局域网花生壳</title>
    <meta charset="UTF-8">
    <script src="js/jquery-1.4.4.min.js" type="text/javascript" ></script>
    <style>
        body{
            margin: 50px;
        }
        td,th{
            border: solid black 1px;
            margin: 0;
        }
    </style>
    <script>
        var baseUrl = "http://192.168.1.254/web/";
//        baseUrl = "http://192.168.1.101:8080/web/";
        function cancleBind(port) {
            $.getJSON(
                    baseUrl+"api",
                    {"type":"off","rport":port},
                    function (data) {
                        alert(data.message)
                        if(data.code == 1){
                            window.location.reload();
                        }
                    }
            )
        }

        $(document).ready(function () {
            $.getJSON(
                    baseUrl+"api/getIp",
                    {},
                    function (data) {
                        if(data.code == 1){
                            $("#ip").val(data.data);
                            $("#showIp").append(data.data);
                        }
                    }
            )

            $.getJSON(
                    baseUrl+"api/list",
                    {},
                    function (data) {
                        data.data["6001"].info
                        var doc = "";
                        var doc2 = "";
                        for(var i=6001 ;i<=6006;i++){
                            if(data.data[i].on == true){
                                doc += "<tr><td>"+i+"</td>";
                                doc += "<td>"+data.data[i].info +"</td>";
                                doc += "<td>"+data.data[i].url +"</td>";
                                doc += "<td>"+data.data[i].on +"<input type=\"button\" size=\"10\" value=\"关闭\" onclick=\"cancleBind("+i+")\" ></td>";
                                doc += "<tr>";
                            }else {
                                doc2 += "<option value=\""+i+"\">" +i+"</option>";
                            }
                        }
                        $("#tableTitle").after(doc);
                        $("#remoteList").append(doc2);
                    }
            )

            $("#start").click(function () {
                $.getJSON(
                        baseUrl+"api",
                        {"type":"on","rport":$("#remoteList").val(),"lip":$("#ip").val(),"lport":$("#port").val()},
                        function (data) {
                            alert(data.message)
                            if(data.code == 1){
                                window.location.reload();
                            }
                        }
                )
            });

            $("#reset").click(function () {
                $.getJSON(
                        baseUrl+"api/reset",
                        {},
                        function (data) {
                            alert(data.message)
                            if(data.code == 1){
                                window.location.reload();
                            }
                        }
                )
            });


        })

    </script>
</head>
<body>
    <h1>局域网花生壳配置   <input type="button" value="重置全部连接" id="reset"></h1>
    <p id="showIp">本机局域网ip:</p>
    <div>
        <div>
            <input disabled type="text" size="35" value="本地局域网IP"/>
            <input disabled type="text" size="15"value="本地局域网端口">
            <input disabled type="text" size="15"value="远程端口">
            <br>
            <input id="ip" type="text" size="35"/>
            <input id="port" type="text" size="15">
            <!--<input id="rport" type="text" size="15">-->
            <select id="remoteList"></select>
            <input id="start" type="button" size="10" value="启动">
            <p></p><hr><p></p>

        </div>
        <table>
            <tr id="tableTitle">
               <th>远程端口</th>
               <th>本地转发地址</th>
               <th>访问地址</th>
               <th>是否启用</th>
            </tr>
        </table>
    </div>


</body>
</html>